<template>
  <div id="app">
    <header-component></header-component>
     <br/>
    <!--  <p>
     <router-link to="home">主页</router-link>
     <router-link to="news">新闻</router-link>
     </p> -->
     <router-view></router-view>
     <function-component></function-component>
     <footer-component></footer-component>
  </div>
</template>

<script>
import headerComponent from './components/layout/header-component.vue'
import footerComponent from './components/layout/footer-component.vue'
import functionComponent from './components/layout/function-component.vue'
import 'components/index.css'
export default {
   components: {
    headerComponent,
    footerComponent,
    functionComponent,
   }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
@media (min-width: 768px){
  #app {
  padding-top:80px;
  }
}
@media (max-width: 767px){
 #app {
  padding-top:60px;
  } 
}
</style>
